<!--
 * @Author: jiangyg email@jiangyg.com
 * @Date: 2022-11-10 20:57:41
 * @LastEditors: jiangyg email@jiangyg.com
 * @LastEditTime: 2022-11-23 21:52:54
 * @FilePath: /frontend/mall-frontend/src/views/modules/admin/main-menu.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <el-scrollbar class="site-scrollbar">
    <el-menu class="site-menu" :collapse="collapse" active-text-color="#ffffff" :background-color="backgroundColor" default-active="2" text-color="#fff">
      <main-sub-menu v-for="menu in menuList" :key="menu.id" :menu="menu" />
    </el-menu>
  </el-scrollbar>
</template>

<script lang="ts" setup>
import admin from "@/utils/admin";
import { computed, defineProps } from "vue";

import MainSubMenu from "@/views/modules/admin/main-sub-menu.vue";

// 属性定义
const props = defineProps({
  collapse: {
    type: Boolean,
    required: true,
  },
  backgroundColor: {
    type: String,
    required: true,
  },
});

// 菜单列表
const menuList = computed(() => admin.menuList());
</script>

<style lang="scss">
.site-scrollbar {

  .site-menu {
    border: 0;

    .icon-svg {
      width: 1.2em !important;
      height: 1.2em !important;
      margin-right: 10px;
    }
  }
}
</style>